<!DOCTYPE html>
<html>
<head>
	<title>员工信息管理系统</title>
	<meta charset="utf-8">
	<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
	<link rel="stylesheet" href="https://unpkg.com/element-ui/lib/theme-chalk/index.css">
	<script src="https://unpkg.com/element-ui/lib/index.js"></script>
	<script src="https://unpkg.com/axios/dist/axios.min.js"></script>


</head>
<body>
	<div id="root">
		<h2>员工信息管理系统</h2>
		<el-table :data="person" stripe>
			<el-table-column prop="id" label="编号">
			</el-table-column>
			<el-table-column prop="name" label="姓名">
			</el-table-column>
			<el-table-column prop="age" label="年龄">
			</el-table-column>
			<el-table-column prop="sex" label="性别">
				<template v-slot="item">
					<span>{{item.row.sex?"男":"女"}}</span>
				</template>
			</el-table-column>
			<el-table-column prop="status" label="在职状态">
				<template v-slot="item">
					<el-tag v-if="item.row.status">在职</el-tag>
					<el-tooltip v-else :content="item.row.leaveDate" placement="top">
						<el-tag type="danger">离职</el-tag>
					</el-tooltip>
				</template>
			</el-table-column>
			<el-table-column prop="department" label="所属部门">
			</el-table-column>
			<el-table-column prop="joinDate" label="入职时间">
			</el-table-column>
			<el-table-column prop="salary" label="薪水">
				<template v-slot="item">
					<span>¥{{item.row.salary}}</span>
				</template>
			</el-table-column>
			<el-table-column  label="操作">
				<template v-slot="item">
					<el-button type="danger">删除</el-button>
				</template>
			</el-table-column>
		</el-table>

	</div>


	<script type="text/javascript">

		var root = new Vue({
			el:"#root",
			data(){
				return{
					person:[
								// {
								// 	id:1,
								// 	name:"萨满",
								// 	age:45,
								// 	sex:1,
								// 	status:1,
								// 	department:"人事部",
								// 	joinDate:"2018-2-12",
								// 	leaveDate:"",
								// 	salary:5000
								// },
								// {
								// 	id:2,
								// 	name:"武器",
								// 	age:48,
								// 	sex:0,
								// 	status:1,
								// 	department:"安保部",
								// 	joinDate:"2018-2-12",
								// 	leaveDate:"",
								// 	salary:8000
								// },
								// {
								// 	id:3,
								// 	name:"盒子",
								// 	age:48,
								// 	sex:0,
								// 	status:0,
								// 	department:"人事部",
								// 	joinDate:"2018-2-12",
								// 	leaveDate:"2019-9-30",
								// 	salary:5000
								// },
							]
				}
			},
			mounted(){
				axios.get('http://192.168.0.8:8088/get').then((response)=> {
					this.person = response.person
				})

				// var http = new XMLHttpRequest();
				// http.open("GET","http://192.168.0.8:8088/getData",false);
				// http.send();
				// this.person = JSON.parse(http.responseText);
			},

		})
	</script>
</body>
</html>